<template>
  <view class="container">
    <view class="back"
    :style="{
      'background-color': userInfo.id ? '#F0F0F0' : '#FFFFFF'
    }"
    ></view>
    <view
        v-if="userInfo.id"
    >
      <kt-nav-bar
          :icon="$kt.file.byPath('tabbar/mine-selected.svg')"
          :title="$i18n.zhToGlobal('我的')"></kt-nav-bar>

      <view>

        <user-common-info-card
            :is-self="true"
            :user-info="userInfo"
        ></user-common-info-card>

        <view
            class="box-box">

          <user-info-order-card></user-info-order-card>

          <view style="height: 30rpx"></view>
          <view>

            <!-- 换成菜单 -->
            <view class="menu-box">
              <view class="menu"
              @click="$kt.router.navTo('/pages/address/address')"
              >

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('image/address.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('收货地址') }}</view>
              </view>
              <view
                  @click="$kt.router.navTo('/pages/collect/collect')"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('image/collection.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('收藏') }}</view>
              </view>

              <view
                  @click="$kt.router.navTo('/pages/language-select/language-select')"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('image/language.svg')"></image>
                </view>
                <view class="menu-text">{{ $i18n.zhToGlobal('语言切换') }}</view>
              </view>
              <view
                  @click="isLogoutModal = true"
                  class="menu">

                <view class="menu-icon-box">
                  <image
                      mode="aspectFill"
                      class="menu-icon"
                      :src="$kt.file.byPath('image/logout.svg')"></image>
                </view>
                <view
                    class="menu-text">{{ $i18n.zhToGlobal('退出登录') }}
                </view>
              </view>
            </view>


            <view style="height: 20rpx"></view>

          </view>

        </view>
      </view>

      <view style="height: 180rpx"></view>
    </view>


    <no-login
    ref="noLogin"
    ></no-login>

    <u-modal :show="isLogoutModal"
             :showCancelButton="true"
             :title="$i18n.zhToGlobal('提示')"
             :content="$i18n.zhToGlobal('是否确定退出登录')"
             :confirm-text="$i18n.zhToGlobal('确定')"
             :cancel-text="$i18n.zhToGlobal('取消')"
             @cancel="isLogoutModal = false"
             :closeOnClickOverlay="true"
             @confirm="toLogout"
    ></u-modal>
  </view>
</template>

<script>
import UserCommonInfoCard from "@/components/user-info/user-common-info-card.vue";
import UserInfoOrderCard from "@/components/user-info/user-info-order-card.vue";

export default {
  components: {UserInfoOrderCard, UserCommonInfoCard},
  data() {
    return {
      userInfo: {
        nickname: "",
        fileIdOfAvatar: "",
        genderCode: "male",
        email: "2453201633@qq.com",
      },
      isLogin: this.$kt.userAccount.getIsLogin(),
      isLogoutModal: false

    }
  },
  created() {
    // 监听登录成功事件
    this.$kt.event.on("login:success", () => {
      this.isLogin = true;
      this.userInfo = this.$kt.userAccount.getSelf();
    });
    // userAccount:getSelf
    this.$kt.event.on("userAccount:getSelf", () => {
      this.userInfo = this.$kt.userAccount.getSelf();
    });
  },
  mounted() {
    this.isLogin = true;
    this.userInfo = this.$kt.userAccount.getSelf();
  },
  methods: {
    toLogout() {
      this.isLogin = false;
      this.$kt.userAccount.setIsLogin(false);
      this.$kt.storage.remove("token");

      uni.reLaunch({
        url: '/pages/into/into'
      });
    }
  }

}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #F0F0F0;
  top: 0;
  left: 0;
  z-index: -1;
}

.box-box {
  padding: 20rpx;
  box-sizing: border-box;
}

.box {
  position: relative;
  vertical-align: top;

  width: 100%;
  display: inline-block;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.title {
  font-size: 32rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-weight: bold;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #F0F0F0;
}

.menu-box {
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;


  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #F0F0F0;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;


    .menu-icon-box {
      width: 50rpx;
      height: 40rpx;
    }

    .menu-icon {
      width: 40rpx;
      height: 40rpx;
    }


  }

}

.menu:active {
  opacity: .6;
}
</style>